<template>
	<view class="content">
		
		<!--盐粒-->
		
		<view class="bg-header" :style="{ paddingTop: iStatusBarHeight + 'px' }">
			<view class="cu-bar">
				<view class="action" @click="back()">
					<text class="wlIcon-fanhui1 text-white"></text>
				</view>
				<view class="content text-bold text-white">
					余额
				</view>
			</view>
		</view>
		
		
		<view class="header-box">
			<view class="left-box">
				<view class="value">{{uesrInfo.money || 0}}</view>
				<view class="title">盐粒</view>
			</view>
			
			<view class="line"></view>
			
			<view class="right-box">
				<view class="value">{{uesrInfo.ph || 0}}</view>
				<view class="title">茶叶</view>
			</view>
		</view>
		
		<view class="item-box"  @click="$wanlshop.to('/pages/user/money/money')">
			<view class="flex align-center">
				<view class="prefix"></view>
				<view class="item-title">茶叶提现</view>
			</view>
			
			<view class="wlIcon-fanhui2 colorgrey"></view>
		</view>
		
<!-- 		<view class="item-box2"  @click="openModal()">
			<view class="flex align-center">
				<view class="prefix"></view>
				<view class="item-title">盐粒互转</view>
			</view>
			
			<view class="wlIcon-fanhui2 colorgrey"></view>
		</view> -->
		
		
		<view class="detail-box">
			
			<view class="flex">
				<view class="detail-left" @click="changeTabType(0)">
					<text :class="tab_type===0 ? 'detail-title-avtive' : 'detail-title'">盐粒明细</text>
					<text :class="tab_type===0 ? 'detail-line-active' : 'detail-line'"></text>
				</view>
				
				<view class="detail-left" @click="changeTabType(1)">
					<text :class="tab_type===1 ? 'detail-title-avtive' : 'detail-title'">茶叶明细</text>
					<text :class="tab_type===1 ? 'detail-line-active' : 'detail-line'"></text>
				</view>
			</view>
			
			
			<view class="middel-box">
				<view :class="type===0 ? 'middle-active' : 'middle-normal'" @click="changeType(0)">全部</view>
				<view :class="type===1 ? 'middle-active' : 'middle-normal'" @click="changeType(1)">支出</view>
				<view :class="type===2 ? 'middle-active' : 'middle-normal'" @click="changeType(2)">收入</view>
			</view>
			
			
			<view class="list-box">
				<view class="item" v-for="(item,index) in dataList" :key="index">
					<view class="flex flex-direction">
						<view class="title1 text-cut">{{item.memo||''}}</view>
						<view class="title2 text-cut">{{item.createtime||''}}</view>
					</view>
					
					<view class="number">{{item.val||''}}</view>
				</view>
			</view>
			
			
			<uni-load-more :status="status" :content-text="contentText" />
			
		</view>
		
		
		<wanl-modal custom :show="showModal" width="93%" padding="0rpx">
			<view class="modal-body">
				<image src="/static/images/modal_bg.png" class="modalImage"></image>
				<view class="modal-box">
					<view class="flex align-center justify-center">
						<view class="modal-title">盐粒互转</view>
						<image src="/static/images/close.png" class="close-image" @click="closeModel"></image>
					</view>
					
					<view class="modal-money">可转盐粒余额：{{uesrInfo.money || 0}}</view>
					
					<view class="input-box">
						<view class="input-title">接受人ID/账号</view>
						<input placeholder="请输入ID/账号" 
						placeholder-style='text-align:right;font-size: 26rpx;'
						v-model="mobile"
						></input>
					</view>
					
					<view class="input-box">
						<view class="input-title">数量</view>
						<input placeholder="请输入数量"
						 placeholder-style='text-align:right;font-size: 26rpx;'
						 v-model="num"
						 ></input>
					</view>
					
					<view class="modal-middle-title">
						<view class="line-blue"></view>
						<view class="pay-password-title">支付密码</view>
						<view class="line-blue"></view>
					</view>
					
					
					<view class="pay-box">
						<view class="pay-input" v-for="(item,index) in 6" :key="index">
							<input type="number" 
							v-model="pay_pwd[index]"  
							maxlength="1"
							:id="'input-'+ index" 
							:focus="focus_index == index"
							autocomplete="off" 
							autocapitalize="off" 
							autocorrect="off" 
							@keyup.delete="funDeletePhoneNum"
							@input="funInputPhoneNum" 
							@focus="funFocusInput"
							></input>
						</view>
					</view>
					
					<view class="pay-btn" @click="submit()">确认支付</view>
					
				</view>
			</view>
		</wanl-modal>
		
		
	</view>
	
	
</template>

<script>
export default {
	data() {
		return {
			iStatusBarHeight: 0,
			uesrInfo:{},
			type:0, //0 全部 1收入 2支出
			tab_type: 0, //0 盐粒明细，1 ph明细
			showModal:false,
			mobile:'',
			num:'',
			pay_pwd:[],
			focus_index: -1,
			
			dataList: [],
			reload: false, //判断是否上拉
			total: 0, //数据量
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: '加载中',
				contentnomore: ''
			}
		}
	},
	onLoad() {
		this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
		
		//#ifdef H5
		this.iStatusBarHeight = 36;
	    //#endif
		
		this.getUserInfo();
		this.loadData();
	},
	onPullDownRefresh() {
		this.current_page = 1;
		this.reload = true;
		this.loadData();
	},
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		}
	},
	methods: {
		submit(){
			if(!this.mobile){
				this.$wanlshop.msg('ID/账号不能为空');
				return false;
			}
			
			if(!this.num){
				this.$wanlshop.msg('数量不能为空');
				return false;
			}
			console.log("pay_pwd", this.pay_pwd);
			
			uni.request({
				url: '/user/moneyzz',
				method: 'POST',
				data: {
					mobile: this.mobile,
					num: this.num,
					pay_pwd: this.pay_pwd.join(''),
				},
				success: res => {
					uni.stopPullDownRefresh();
					if(res.code == 1 || res.res.code == 1){
						this.$wanlshop.msg('互转成功');
						this.showModal = false;
						this.current_page = 1;
						this.dataList = [];
						this.getUserInfo();
						this.loadData();
					}else{
						this.$wanlshop.msg(res.msg);
					}
				}
			});
			
		},
		openModal(){
			this.showModal = true;
		},
		closeModel(){
			this.showModal = false;
		},
		async getUserInfo() {
			await uni.request({
				url: '/user/userinfo',
				method: 'GET',
				success: res => {
					if(res.code == 1 || res.res.code == 1){
						this.uesrInfo = res.data;
					}	
				}
			});
			
			uni.stopPullDownRefresh();
		},
		async loadData() {
			if(this.tab_type === 0){
				await uni.request({
					url: '/user/moneylog',
					method: 'GET',
					data: {
						page: this.current_page,
						type: this.type,
					},
					success: res => {
						uni.stopPullDownRefresh();
						this.dataList = this.reload ? res.data.data : this.dataList.concat(res.data.data);//数据 追加
						this.total = res.data.total; //数据量
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						this.status = res.data.total == 0 ? 'noMore' : 'more';
					}
				});
			}
			
			if(this.tab_type === 1){
				await uni.request({
					url: '/user/walletlog',
					method: 'GET',
					data: {
						page: this.current_page,
						type: this.type,
						ope:'PH',
					},
					success: res => {
						uni.stopPullDownRefresh();
						this.dataList = this.reload ? res.data.data : this.dataList.concat(res.data.data);//数据 追加
						this.total = res.data.total; //数据量
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						this.status = res.data.total == 0 ? 'noMore' : 'more';
					}
				});
			}
		},
		changeType(type){
			this.type = type;
			this.total = 0;
			this.current_page = 1;
			this.last_page = 1;
			this.dataList = [];
			this.loadData();
		},
		changeTabType(tab_type){
			this.tab_type = tab_type;
			this.total = 0;
			this.current_page = 1;
			this.last_page = 1;
			this.dataList = [];
			this.loadData();
		},
		funInputPhoneNum(e) {
			var index = (e.target.id).replace('input-', '');
			var value = e.detail.value;
			if (index != '5' && value != '') {
				this.focus_index = Number(index) + 1
			}
		},
		funDeletePhoneNum(e) {
			var index = (e.target.id).replace('input-', '');
			if (this.pay_pwd[index] == '' && index > 1 ) {
				this.focus_index = Number(index) - 1;
			}
		},
		funFocusInput(e){
			var index = (e.target.id).replace('input-', '');
			if(this.pay_pwd[index] != ''){
				this.pay_pwd[index] = '';
			}
		},
		back(){
			uni.navigateBack({
				 delta: 1
			})
		}
	}
}	
</script>

<style lang="scss" scoped>
.stat{
	background-color: #366BEB;
	position: fixed;
	z-index: 1;
	height: var(--status-bar-height);// --status-bar-height系统状态栏高度
	width: 100%;
	top: 0;
	left: 0;
}

.header-box{
	width: 702rpx;
	height: 180rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-left: 24rpx;
	position: absolute;
	top: 106px;
}

.left-box{
	display:flex;
	flex-direction: column;
	width: 350rpx;
	align-items: center;
}

.right-box{
	display:flex;
	flex-direction: column;
	width: 350rpx;
	align-items: center;
}

.value{
	font-size: 44rpx;
	font-family: D-DIN Exp;
	font-weight: 400;
	color: #292929;
}

.title{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999999;
}

.line{
	width: 1rpx;
	height: 50rpx;
	background: #E6E6E6;
}

.colorgrey{
	color: #B3B3B3;
}

.item-box{
	margin-top: 50rpx;
	padding: 0rpx 27rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 702rpx;
	height: 100rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	margin-left: 24rpx;
}

.item-box2{
	margin-top: 20rpx;
	padding: 0rpx 27rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 702rpx;
	height: 100rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	margin-left: 24rpx;
}

.prefix{
	width: 6rpx;
	height: 26rpx;
	background: #366BEB;
	margin-right: 20rpx;
}

.item-title{
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #292929;
}

.detail-box{
	width: 702rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	margin-left: 24rpx;
	margin-top: 20rpx;
	padding: 35rpx 28rpx;
}

.detail-title-avtive{
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #366BEB;
}

.detail-title{
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #292929;
}

.detail-line-active{
	width: 42rpx;
	height: 5rpx;
	background: #366BEB;
	margin-top: 12rpx;
}

.detail-line{
	width: 42rpx;
	height: 5rpx;
	background: #ffffff;
	margin-top: 12rpx;
}

.detail-left{
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-right: 142rpx;
}

.middel-box{
	width: 636rpx;
	height: 70rpx;
	background: #F7F7F7;
	border-radius: 35rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 32rpx;
}

.middle-active{
	width: 210rpx;
	height: 64rpx;
	background: #FFFFFF;
	border-radius: 32rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #292929;
	display: flex;
	align-items: center;
	justify-content: center;
}

.middle-normal{
	width: 210rpx;
	height: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.list-box{
	margin-top: 80rpx;
}

.number{
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #292929;
}

.title1{
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #292929;
}

.title2{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999999;
	margin-top: 27rpx;
}

.item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 50rpx;
}

.bg-header{
	width: 750rpx;
	height: 351rpx;
	background: #366BEB;
}

.modalImage{
	width: 698rpx;
	height: 204rpx;
}

.modal-box{
	position: absolute;
	top: 30rpx;
	left: 0rpx;
	width: 100%;
	padding-left: 28rpx;
	padding-right: 28rpx;
	padding-bottom: 28rpx;
}

.modal-title{
	font-size: 32rrpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #292929;
}

.close-image{
	width: 42rpx;
	height: 42rpx;
	position: absolute;
	top: 0rpx;
	right: 28rpx;
}

.modal-money{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #292929;
	margin-top: 42rpx;
	margin-bottom: 27rpx;
}


.input-box{
	width: 646rpx;
	height: 88rpx;
	background: #FFFFFF;
	border: 1px solid #CCCCCC;
	border-radius: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0rpx 32rpx;
	margin-bottom: 32rpx;
	
	input{
		text-align: right;
		width: 300rpx;
	}
}

.modal-body{
	height: 738rpx;
	background-color: #FFFFFF;
	border-radius: 20rpx;
}

.modal-middle-title{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 12rpx;
}

.line-blue{
	width: 70rpx;
	height: 3rpx;
	background: #366BEB;
}

.pay-password-title{
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #292929;
	margin-left: 24rpx;
	margin-right: 24rpx;
}

.pay-box{
	margin-top: 36rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.pay-input{
	width: 88rpx;
	height: 88rpx;
	background: #FFFFFF;
	border: 1px solid #CCCCCC;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	
	input{
		text-align: center;
	}
}

.pay-btn{
	width: 646rpx;
	height: 88rpx;
	background: #366BEB;
	border-radius: 20rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 64rpx;
}

.input-title{
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #292929;
}

</style>